<template>
    <div class="p-2">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
            <el-tab-pane label="设计师任务单" name="first"></el-tab-pane>
            <el-tab-pane label="我的设计单" name="second"></el-tab-pane>
        </el-tabs>
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="search">
                <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                    <el-form-item label="客户名称：" prop="customerName">
                        <el-input v-model="queryParams.customerName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="定稿状态：" prop="draftFlag">
                        <el-select v-model="queryParams.draftFlag" clearable>
                            <el-option label="已定稿" value="1"></el-option>
                            <el-option label="未定稿" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="烫金版：" prop="hotStampingFlag">
                        <el-select v-model="queryParams.hotStampingFlag" clearable>
                            <el-option label="无烫金工序" value="-1"></el-option>
                            <el-option label="已就绪" value="1"></el-option>
                            <el-option label="未就绪" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>

        <el-card shadow="never">
            <template #header>
                <el-row :gutter="8" class="mb8">
                    <el-col :span="3">
                        <div class="nav_text">未定稿: {{ undefinedDraftNumber }}</div>
                    </el-col>
                    <el-col :span="1.5">
                        <div class="nav_text">未接单: {{ notAcceptedOrderNumber }}</div>
                    </el-col>
                </el-row>

            </template>
            <el-table ref="multipleTableRef" v-loading="loading" :data="packageOrderList" stripe
                @selection-change="handleSelectionChange">
                <el-table-column label="订单类别" prop="productType" align="center">
                    <template #default="scope">
                        <span>
                            {{ customized_order_type.filter((item: any) => item.value ==
                                scope.row.productType)[0]?.label }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="制单员" prop="creator" align="center"></el-table-column>
                <el-table-column label="客源渠道" prop="saleMethod" align="center"></el-table-column>
                <el-table-column label="制单日期" width="100px" prop="createTime" align="center"></el-table-column>
                <el-table-column label="交货日期" width="100px" prop="deliveryDate" align="center"></el-table-column>
                <el-table-column label="销售单号" width="100px" prop="saleOrderCode" align="center"></el-table-column>
                <el-table-column label="客户名称" prop="customerName" align="center"></el-table-column>
                <el-table-column label="产品名称" prop="productStyle" align="center">
                    <template #default="scope">
                        <el-link type="primary">{{ scope.row.customerName }}({{ personal_ratio.filter((item: any) =>
                            item.value ==
                            scope.row.personCount)[0]?.label }})</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="订单数量" prop="number" align="center"></el-table-column>
                <el-table-column label="单价" width="100px" prop="price" align="center"></el-table-column>
                <el-table-column label="订单金领" align="center">
                    <template #default="scope">
                        {{ scope.row.price * scope.row.number }}
                    </template>
                </el-table-column>
                <el-table-column label="备注" width="220px" prop="remark" align="center"></el-table-column>
                <el-table-column label="设计师" prop="designer" align="center"></el-table-column>
                <el-table-column label="定稿" align="center">
                    <template #default="scope">
                        <span class="alert" v-if="scope.row.draftFlag == '0'">未定稿</span>
                        <span class="normal" v-if="scope.row.draftFlag == '1'"> 已定稿</span>
                    </template>
                </el-table-column>
                <el-table-column label="烫金版" align="center">
                    <template #default="scope">
                        <span class="alert" v-if="scope.row.hotStampingFlag == '0'">未就绪</span>
                        <span class="normal" v-if="scope.row.hotStampingFlag == '1'"> 已就绪</span>
                        <span class="primary" v-if="scope.row.hotStampingFlag == '-1'"> 无烫金工序</span>
                    </template>
                </el-table-column>
                <el-table-column label="已接单时间" width="100px" align="center">
                    <template #default="scope">
                        <span class="warning" v-if="scope.row.acceptDays < 3">{{ scope.row.acceptDays }}天</span>
                        <span class="normal" v-if="scope.row.acceptDays >= 3">{{ scope.row.acceptDays }}天</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="240px">
                    <template #default="scope">
                        <template v-if="!scope.row.acceptId">
                            <el-tooltip content="接单" placement="top">
                                <el-button link :style="{ fontSize: '15px' }" type="success" icon="Filter"
                                    @click="handleAcceptOrders(scope.row)"></el-button>
                            </el-tooltip>
                        </template>
                        <template v-if="!scope.row.acceptId">
                            <el-tooltip content="分单">
                                <el-button link :style="{ fontSize: '15px' }" type="primary" icon="Share"
                                    @click="handleReinsurancePolicy(scope.row)"></el-button>
                            </el-tooltip>
                        </template>
                        <template v-if="scope.row.acceptId && scope.row.hotStampingFlag != 1">
                            <el-tooltip content="定稿">
                                <el-button @click="handleFinalDraft(scope.row)" link :style="{ fontSize: '15px' }"
                                    type="danger" icon="CopyDocument"></el-button>
                            </el-tooltip>
                        </template>
                        <el-tooltip content="烫金版就绪">
                            <el-button link :style="{ fontSize: '15px' }" type="warning" icon="UserFilled"
                                @click="handleBeReady(scope.row)"></el-button>
                        </el-tooltip>
                        <template
                            v-if="scope.row.acceptId && scope.row.draftFlag != 0 && scope.row.hotStampingFlag == 0">
                            <el-tooltip content="烫金版上传">
                                <el-button @click="handleHotUpload(scope.row)" link :style="{ fontSize: '15px' }"
                                    icon="Upload"></el-button>
                            </el-tooltip>
                        </template>
                        <el-tooltip content="订单详情">
                            <el-button link type="primary" :style="{ fontSize: '15px' }" icon="Document"
                                @click="handlOpenDetails(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>

            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getDesignerList" />
        </el-card>
        <addSingle :visible="distributionVisible" :initList="distributionObj"
            @submit="handleSubmit($event, getDesignerList)" @close="handleCloseAdd" />
        <finalDraft :visible="finalDraftVisible" :packageMethod="customized_order_type" :personal_ratio="personal_ratio"
            :allDesignerList="allDesignerList" :dataDetails="finalDraftDetails" :initList="finalDraftObj"
            @submit="handleFinalDraftSubmit($event, getDesignerList)" @close="handleFinalDraftClose" />
        <orderDetail :visible="detailVisible" :data="detailObj" :packageMethod="package_method"
            @close="handlOpenDetailsClose" />
        <hotStampingVersion :visible="stampingVisible" :customerName="customerName" :acceptId="acceptId"
            :initList="stampingObj" @submit="handleStampingSubmit($event, getDesignerList)"
            @close="handleStampingClose" />
        <hotUpload :visible="hotUploadVisible" :initList="addSingleObj" @submit="handleHotUploadSubmit"
            @close="handleHotUploadClose" />

    </div>
</template>
<script setup lang="ts">

/** 
 * acceptId 接单  存在表示已接单
 * draftFlag	是否定稿(0:未定稿 1：已定稿)
 */

import { type FormInstance, TableInstance, TabsPaneContext } from 'element-plus';
import { QueryPackageType, PackageVO } from '@/api/sj/productManagement/designerTakesOrders/types';
import { getDesignerAcceptOrderListApi, designerAcceptApi } from '@/api/sj/productManagement/designerTakesOrders/index';

import addSingle from './components/addSingle.vue';
import finalDraft from './components/finalDraft.vue';
import orderDetail from './components/orderDetail.vue';
import hotStampingVersion from './components/hotStampingVersion.vue';
import hotUpload from './components/hotUpload.vue';

/** 分单 */
import useDistribution from '@/hooks/productManagement/designerTakesOrders/useDistribution';

/** 定稿 */
import useFinalDraft from '@/hooks/productManagement/designerTakesOrders/useFinalDraft';

/** 设计师订单详情 */
import useDesignerDetails from '@/hooks/productManagement/designerTakesOrders/useDesignerDetails';

/** 烫金版就绪 */
import useHotStampingVersion from '@/hooks/productManagement/designerTakesOrders/useHotStampingVersion';
const { stampingVisible, acceptId, stampingObj, customerName, handleStampingSubmit, handleBeReady, handleStampingClose } = useHotStampingVersion();

const { finalDraftVisible, finalDraftObj, allDesignerList, finalDraftDetails, handleFinalDraft, handleFinalDraftSubmit, handleFinalDraftClose } = useFinalDraft();

const { distributionVisible, distributionObj, handleReinsurancePolicy, handleCloseAdd, handleSubmit } = useDistribution();
const { detailVisible, detailObj, handlOpenDetails, handlOpenDetailsClose } = useDesignerDetails();



const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { customized_order_type, personal_ratio, package_method } = toRefs<any>(proxy?.useDict('customized_order_type', 'personal_ratio', 'package_method'));
const queryFormRef = ref<FormInstance>();
const multipleTableRef = ref<TableInstance>()

const undefinedDraftNumber = ref(0); // 未定稿数量
const notAcceptedOrderNumber = ref(0); // 未接单数量

const data = reactive<pageDataOnlyQuery<QueryPackageType>>({
    queryParams: {
        draftFlag: '',
        hotStampingFlag: '',
        customerName: '',
        pageSize: 30,
        pageNum: 1
    }
});

const activeName = ref('first');
const { queryParams } = toRefs(data);
const packageOrderList = ref<PackageVO[]>();
const totalData = ref(0);
const loading = ref(false);
const multipleSelection = ref<PackageVO[]>([])
const addSingleObj = ref<PackageVO>()
// const stampingVisible = ref(false);
const hotUploadVisible = ref(false);

const handleTabClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab.props.label)
}

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getDesignerList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.startDate = undefined;
    queryParams.value.endDate = undefined;
    handleQuery();
};

const getDesignerList = async () => {
    loading.value = true;
    try {
        const data = await getDesignerAcceptOrderListApi(queryParams.value);
        undefinedDraftNumber.value = data.undefinedDraftNumber || 0;
        notAcceptedOrderNumber.value = data.notAcceptedOrderNumber || 0;
        packageOrderList.value = data.dataList.records;
        totalData.value = data.dataList.total;
        loading.value = false;
    } catch (error) {
        loading.value = false;
    }
};


// table 多选的回调
const handleSelectionChange = (val: PackageVO[]) => {
    multipleSelection.value = val
}

// 设计师接单
const handleAcceptOrders = async (row: any) => {
    if (row.acceptId) {
        proxy?.$modal.msgWarning('已经有设计师接单，无法接单');
        return
    }
    try {
        const { code } = await designerAcceptApi({ id: row.id })
        if (code == 200) {
            proxy?.$modal.msgSuccess('接单成功');
            getDesignerList()
        }

    } catch (error) {

    }
}

const handleHotUpload = (row: any) => {

    if (!row.acceptId) return proxy?.$modal.msgWarning('该订单未被接单,请先接单');
    if (row.draftFlag == 0) return proxy?.$modal.msgWarning('该订单未未定稿,请先定稿');
    if (row.hotStampingFlag == 1) return proxy?.$modal.msgWarning('烫金版已就绪，无法重新上传');
    if (row.hotStampingFlag == -1) return proxy?.$modal.msgWarning('无烫金版工序');

    addSingleObj.value = row
    hotUploadVisible.value = true;

}

// 烫金版上传
const handleHotUploadSubmit = () => {
    hotUploadVisible.value = false;
};

// 关闭烫金版上传
const handleHotUploadClose = () => {
    hotUploadVisible.value = false;
};

onMounted(() => {
    getDesignerList();
});

</script>
<style lang="scss" scoped>
.nav_text {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    font-size: 20px;
}
</style>